<?php

/**
 * @file
 * Main view template.
 *
 * Variables available:
 * - $classes_array: An array of classes determined in
 *   template_preprocess_views_view(). Default classes are:
 *     .view
 *     .view-[css_name]
 *     .view-id-[view_name]
 *     .view-display-id-[display_name]
 *     .view-dom-id-[dom_id]
 * - $classes: A string version of $classes_array for use in the class attribute
 * - $css_name: A css-safe version of the view name.
 * - $css_class: The user-specified classes names, if any
 * - $header: The view header
 * - $footer: The view footer
 * - $rows: The results of the view query, if any
 * - $empty: The empty text to display if the view is empty
 * - $pager: The pager next/prev links to display, if any
 * - $exposed: Exposed widget form/info to display
 * - $feed_icon: Feed icon to display, if any
 * - $more: A link to view more, if any
 *
 * @ingroup views_templates
 */
?>



<div class="monitor-dashboard-container">
    <ul class="breadCrumbs">
        <li><a href="/">Главная</a></li>
        <li>/</li>
    </ul>
    <h3>Монитор
        <a href="/node/add/monitor?destination=monitor">
            <img src="/sites/all/themes/webscience/img/plus.jpg" />Добавить
        </a>
    </h3>

    <div class="monitor-dashboard-head">
        <?= $rows ?>
    </div>

    <div class="monitor-dashboard-content">
        <?= $footer ?>
    </div>
</div>


<script type="text/javascript">
    (function ($) {
        $(document).ready(function () {
            var columnNums = 3;
            var columnMargin = 10;
            var columnWidth = (920 - columnMargin * columnNums) / columnNums;
            var colorsHead = ['#D0EFFD', '#B6F0B6', '#FFD3B0'];
            var colorsItem = ['#F9FDFF', '#E4FFE4', '#FDFCEA'];

            var $head = $('.monitor-dashboard-head');
            var $items = $head.find('.monitor-dashboard-item');
            var $column_heads = $items.slice(0, columnNums);
            var $extra = $items.slice(columnNums, 3000);

            var offset = 0;
            $column_heads.addClass('monitor-column-head').each(function (k) {
                $(this).css({
                    left:offset, width: columnWidth, backgroundColor: colorsHead[k]
                });
                offset += columnWidth + columnMargin;
            });

            var offset = columnMargin;
            $extra.addClass('monitor-status-info')
            $($extra.get().reverse()).each(function () {
                var $this = $(this);
                $this.css({
                    right:offset,
                    top: -30
                });
                offset += $this.width() + 10;
            });

            var offset = 0;
            var max_height = 0;

            var $content = $('.monitor-dashboard-content');
            var $columns = $content.find('.monitor-column');
            $columns.hide();
            $columns = $columns.slice(0, columnNums);
            $columns.each(function (k) {
                var $column = $(this);
                $column.css({
                    left:offset, width: columnWidth
                });
                $column.find('.monitor-column-item').css({backgroundColor: colorsItem[k]});
                offset += columnWidth + columnMargin;
                var h = $column.height();
                if (h > max_height) {
                    max_height = h
                }
            });
            $columns.show();
            $content.height(max_height)
        });
    })(jQuery);

</script>